<template>
  <div class="demo-container">
    <h2>多级表头功能</h2>
    <p>展示多级表头功能，可以无限嵌套</p>

    <AdvancedTable
      :data="tableData"
      :columns="columns"
      :selection="false"
      :show-index="true"
      height="500px"
    >
      <!-- 自定义工具栏 -->
      <template #toolbar> </template>
    </AdvancedTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AdvancedTable } from '../components/Table'

// 表格列定义 - 多级表头
const columns = [
  {
    prop: 'name',
    label: '姓名',
    width: 120,
  },
  {
    label: '个人信息',
    children: [
      {
        prop: 'age',
        label: '年龄',
        width: 80,
      },
      {
        prop: 'gender',
        label: '性别',
        width: 80,
      },
      {
        label: '联系方式',
        children: [
          {
            prop: 'phone',
            label: '电话',
            width: 120,
          },
          {
            prop: 'email',
            label: '邮箱',
            width: 180,
          },
        ],
      },
    ],
  },
  {
    label: '工作信息',
    children: [
      {
        prop: 'department',
        label: '部门',
        width: 120,
      },
      {
        prop: 'position',
        label: '职位',
        width: 120,
      },
    ],
  },
  {
    prop: 'address',
    label: '地址',
    minWidth: 180,
  },
]

// 表格数据
const tableData = ref([
  {
    id: 1,
    name: '张三',
    age: 28,
    gender: '男',
    phone: '13566668888',
    email: 'zhangsan@example.com',
    department: '研发部',
    position: '前端工程师',
    address: '北京市朝阳区',
  },
  {
    id: 2,
    name: '李四',
    age: 32,
    gender: '男',
    phone: '13577779999',
    email: 'lisi@example.com',
    department: '研发部',
    position: '后端工程师',
    address: '上海市浦东新区',
  },
  {
    id: 3,
    name: '王五',
    age: 24,
    gender: '女',
    phone: '13588889999',
    email: 'wangwu@example.com',
    department: '设计部',
    position: 'UI设计师',
    address: '广州市天河区',
  },
  {
    id: 4,
    name: '赵六',
    age: 35,
    gender: '男',
    phone: '13599990000',
    email: 'zhaoliu@example.com',
    department: '市场部',
    position: '产品经理',
    address: '深圳市南山区',
  },
  {
    id: 5,
    name: '钱七',
    age: 29,
    gender: '女',
    phone: '13500001111',
    email: 'qianqi@example.com',
    department: '销售部',
    position: '销售经理',
    address: '杭州市西湖区',
  },
])
</script>

<style scoped>
.demo-container {
  padding: 20px;
}

h2 {
  margin-top: 0;
}

.toolbar {
  margin-bottom: 15px;
}
</style>
